<template lang="html">
    <Panel title="导航条" :class="$style.panel">
        <ul :class="$style.content">
            <li>
                <router-link to="/home">
                    <img src="//img12.360buyimg.com/jrpmobile/jfs/t3451/188/644771475/2428/800d7cb7/580f2435Nbfaa8055.png?width=66&height=66"
                        alt="">
                    <p>首页</p>
                </router-link>
            </li>
            <li>
                <router-link to="/money">
                    <img src="//img12.360buyimg.com/jrpmobile/jfs/t3811/55/345433999/2930/116d3dd1/580f1e25N028a1f2c.png?width=66&height=66"
                        alt="">
                    <p>理财</p>
                </router-link>
            </li>
            <li>
                <router-link to="/ious">
                    <img src="//img12.360buyimg.com/jrpmobile/jfs/t3343/179/621044750/1484/5af6b11a/580f50e4N005181d0.png?width=66&height=66"
                        alt="">
                    <p>白条</p>
                </router-link>
            </li>
            <li>
                <router-link to="/raise">
                    <img src="//img12.360buyimg.com/jrpmobile/jfs/t3604/98/635506544/2317/443d3a51/580f240aNbee3dcc4.png?width=66&height=66"
                        alt="">
                    <p>众筹</p>
                </router-link>
            </li>
            <li>
                <router-link to="/my">
                    <img src="//img12.360buyimg.com/jrpmobile/jfs/t3340/68/639059082/2591/800e2d6b/580f51cdN4caf20b2.png?width=66&height=66"
                        alt="">
                    <p>我的</p>
                </router-link>
            </li>
        </ul>
    </Panel>
</template>
<script>
    import Panel from "../core/panel.vue"
    export default {
        components: {
            Panel
        },
    }
</script>
<style lang="scss" module>
    @import "../../css/element.scss";

    .panel {
        @include panel;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        margin: 0;
    }

    .panel h4 {
        display: none;
    }

    .content {
        @include flex(row);
        justify-content: space-around;
    }

    .content li {
        text-align: center;

    }

    .content li a {
        text-decoration: none;
    }

    .content li a img {
        width: 42px;
        height: 42px;
        display: inline-block;
        margin: 10px auto 6px;
    }

    .content li a p {
        font-size: 22px;
        color: #656565;
        margin-bottom: 8px;
    }
</style>